<template>
  <view class="loading-container">
    <view class="loading-content">
      <uni-icons
        class="loading-icon"
        type="spinner-cycle"
        size="48"
        color="#666666"
      />
      <text class="loading-text">加载中，请稍候</text>
    </view>
  </view>
</template>

<script>
import { store as appStore } from "@/store";

export default {
  data() {
    return {
      timer: null,
    };
  },
  watch: {
    // 使用函数返回要监听的值
    isLoadingWhenAppInit: {
      handler(newVal) {
        // console.log('loading.vue init completed')
        if (!newVal) {
          uni.switchTab({
            url: "/pages/list/list",
            fail: (err) => {
              console.error("跳转失败：", err);
            },
          });
        }
      },
      immediate: true, // 立即执行一次
    },
  },
  computed: {
    // 通过计算属性获取状态
    isLoadingWhenAppInit() {
      return appStore.isLoadingWhenAppInit;
    },
  },
  onLoad() {
    // 立即检查状态
    if (!appStore.isLoadingWhenAppInit) {
      uni.switchTab({
        url: "/pages/list/list",
        fail: (err) => {
          console.error("跳转失败：", err);
        },
      });
      return;
    }

    // 设置超时保护
    this.timer = setTimeout(() => {
      if (appStore.isLoadingWhenAppInit) {
        uni.switchTab({
          url: "/pages/list/list",
        });
      }
    }, 5000);
  },
  onUnload() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  },
};
</script>

<style>
page {
  height: 100%;
}

.loading-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%);
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-icon {
  width: 48px;
  height: 48px;
  animation: rotate 1.2s linear infinite;
}

.loading-text {
  margin-top: 30rpx;
  font-size: 14px;
  color: #666666;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
